<template>
  <div class="departments">
    <el-card>
      <!-- 标题栏 -->
      <el-tabs >
        <el-tab-pane  label="组织结构" />
      </el-tabs>
      <!-- 下方标题栏 -->
      <div class="tree">
        <TreeItem :item="topName" style="padding: 10px 0" />
        <!-- 下方内容 -->
        <el-tree :data="data" >
          <template v-slot="{ data }">
            <TreeItem style="width: 100%" :item="data" @getData="getData" />
          </template>
        </el-tree>
      </div>
    </el-card>
    <!-- 弹框组件 -->
    <DialogItem :init-list="initList" @getData="getData" />
  </div>
</template>

<script>
import { companyDepartment } from '@/api/departments'
import TreeItem from './components/tree-item.vue'
import DialogItem from './components/dialogItem.vue'
export default {
  components: {
    TreeItem,
    DialogItem
  },
  data () {
    return {
      topName: {
        name: '传智',
        manager: '负责人',
        isTop: true,
        id: '',
        code: '1'
      },
      data: [],
      initList: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    // 获取数据并渲染
    async getData () {
      const res = await companyDepartment()
      this.topName.name = res.data.companyName
      // console.log('公司信息',res)
      this.initList = res.data.depts
      this.data = this.changeData(res.data.depts)
      console.log('转换后的属性结构数据',this.changeData(res.data.depts))
    },
    // 树状结构筛选
    changeData (arr, str = '') {
      return arr.filter(item => {
        if (item.pid === str) {
          item.children = this.changeData(arr, item.id)
          return true
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.tree {
  padding: 50px 120px 0;
  font-size: 14px;
}
.el-tabs {
  padding: 20px 40px 0;
}
.tree-top {
  padding: 10px 0;
}

.el-tree {
  padding: 10px 0;
  border-top: 1px solid #ccc;
}
</style>
